<template>
  <view class="detail-wrap">

    <view class="swiper-wrap">
      <swiper class="swiper-box" @change="swiperChange">
        <swiper-item v-for="(item, index) in detail.photoList" :key="index" class="swipers flex-center">
          <image :src="item" mode="aspectFill" @tap="ViewImage(index, detail.photoList)" class="img"
                 style="width: 100%;height: 100%;"></image>
        </swiper-item>
      </swiper>
      <div class="custom-indicator flex-center">{{ current + 1 }} / {{ detail.photoList.length }}</div>
    </view>

    <view class="item-head_box">
      <view class="head_image_box">
        <view class="img-wrap flex-center">
          <image :src="detail.avatar" mode="widthFix" class="avatar"></image>
        </view>
        <view class="head_box">
          <text class="name">{{ detail.username }}</text>
          <text class="time">
            {{ detail.createTime }}
          </text>
        </view>

      </view>
    </view>
    <view class="text_subject">{{ detail.subject }}</view>

    <view class="comment-wrap">
      <view class="scroll-wrap">
        <view v-if="detail.commentList !==null &&detail.commentList.length !==0">
          <view class="top-num padding-tb">共{{ detail.commentList.length }}条评论</view>
        </view>
        <view v-else-if="detail.commentList.length ===0">
          <view class="top-num padding-tb">暂时没有评论</view>
        </view>

        <view class="" v-else>
          <view class="top-num padding-tb">暂时没有评论</view>
        </view>

        <template v-if="detail.commentList !==null">
          <view class="comment_list">
            <view class="comment-item" v-for="(item, index) in detail.commentList"
                  :key="index">

              <view class="left-avatar">
                <image class="avatar_img" :src="item.avatar"/>
              </view>
              <view class="right-box">
                <view class="right-mine">
                  <view class="right-top">
                    <p class="title">
                      {{ item.username }}
                    </p>
                    <text class="time">{{ item.createTime }}</text>
                  </view>
                  <p class="content">{{ item.content }}</p>
                </view>
              </view>
            </view>
          </view>

        </template>
        <template v-else>
          <view class="flex-center margin">
            <y-Empty/>
          </view>
        </template>
      </view>
    </view>

    <view class="comment-input">
      <input type="text" v-model="commentVal" class="top-input" placeholder="说点什么吧..."/>
      <view class="send-btn" @tap="addCommon">发送</view>
    </view>
  </view>
</template>

<script>
import {
  content_detail
} from '@/api/ap_content'

import {
  publish
} from '@/api/ap_comment'


let that;
export default {
  data() {
    return {
      background: {
        'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
      },
      detailId: '',
      commentVal: '',
      current: 0,
      commentList: [],
      detail: {}
    };
  },
  onLoad(options) {
    that = this
    this.getContentDetail(options.id)
    this.detailId = options.id
  },

  methods: {

    getContentDetail(id) {
      let params = {}
      params.id = id
      content_detail(params).then(res => {
        this.detail = res.data
      })

    },
    ViewImage(index, arr) {
      let list = [];
      for (let i = 0; i < arr.length; i++) {
        list.push(arr[i].url);
      }
      uni.previewImage({
        current: index,
        urls: list
      });
    },
    addCommon() {

      let params = {}
      params.contentId = this.detailId;
      params.content = this.commentVal;
      publish(params).then(res => {
        uni.showToast({
          title: "评论成功"
        })
      }).then(() => {
        this.getContentDetail(this.detailId)
      })

      // 获取评论列表

      this.commentVal = ""
    },
    swiperChange(e) {
      this.current = e.detail.current;
    },
    toOthers() {
      uni.navigateTo({
        url: '../mine/other'
      });
    },
  }
};
</script>

<style lang="less" scoped>

.text_subject {
  margin-left: 32upx;
  margin-right: 32upx;
}

.detail-wrap {
  background-color: #ffffff;
  width: 100vw;
  height: 100vh;

  .item-head_box {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    width: 100%;
    justify-content: space-between;
    height: 100rpx;

    .head_image_box {
      display: flex;
      align-items: center;

      .img-wrap {
        width: 80rpx;
        height: 80rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 1rpx solid #ECECEC;

        .avatar {
          width: 100%;
        }
      }
    }

    .head_box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10upx;
      margin-left: 20rpx;

      .name {
        font-weight: bold;
        font-size: 36upx;
        font-family: "楷体", serif;
      }

      .time {
        color: #3b4144;
        font-size: 24upx;
      }
    }


  }

  .swiper-wrap {

    .swiper-box {
      margin: 0 0 10rpx;
      height: 500rpx;
      background-color: var(--mainColor);
    }

    .custom-indicator {
      position: absolute;
      right: 10px;
      top: 10px;
      background: rgba(0, 0, 0, 0.5);
      padding: 3px 5px;
      border-radius: 12px;
      color: #fff;
    }
  }

  .content_box {
    position: relative;
    margin-top: 500rpx;
  }

  .bottom-time {
    padding: 20rpx 40rpx;
    font-size: 24rpx;
    color: #999999;
  }


  .comment-wrap {
    background-color: #fff;
    padding: 0 40rpx 40rpx;
    margin-top: 16upx;

    .scroll-wrap {
      height: 100%;
      border-top: 1rpx solid var(--mainColor);
    }

    .comment-item {
      display: flex;
      gap: 16upx;
      align-items: start;
      border-radius: 16upx;
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

      .left-avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        border: 1rpx solid #8d8d8d;

        .avatar_img {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }
      }

      .right-box {
        margin-left: 20rpx;


        .right-mine {
          border-radius: 10rpx;
          flex: 1;
        }

        .right-top {
          display: flex;
          width: 100%;
          gap: 48upx;
          justify-content: space-between;

          .reply {
            display: flex;
            font-size: 28rpx;
          }

          .active {
            color: var(--activeColor) !important;
          }

          .title {
            flex: 1;
            color: #000;
            font-weight: bold;

            .author {
              background-color: var(--activeColor);
              color: #ffffff;
              padding: 0 8rpx;
              margin-left: 10rpx;
              border-radius: 6rpx;
            }
          }

          .time {
            color: #999;
          }
        }

        .content {
          padding: 10rpx 0;
        }
      }
    }
  }

  .comment-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-top: 1rpx solid #ECECEC;

    .top-input {
      width: 100%;
      height: 60rpx;
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      background-color: #f5f5f5;
      color: #000;
      border-radius: 80rpx;
      flex: 1;
    }

    .send-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60rpx;
      width: 140rpx;
      margin-left: 20rpx;
      border-radius: 40rpx;
      border: 1rpx solid var(--activeColor);
      color: var(--activeColor);
      background-color: #ffffff;
    }
  }
}

.comment_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16upx;
}
</style>